<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0" name="viewport">
		<meta content="ie=edge" http-equiv="X-UA-Compatible">
		<title>请修改网页标题</title>
	</head>

	<body>
		<div id="app">
			<!-- 请修添加具体操作 -->
			<h1>Hello App!</h1>
			<p>
				<!-- router-link 组件来导航 -->
				<!-- to 属性来指定链接 -->
				<!-- <router-link> 默认会被渲染成一个 '<a>' 标签 -->
				<router-link to="/">首页</router-link>
				<router-link to="/student">会员管理</router-link>
				<router-link to="/teacher">讲师管理</router-link>
			</p>

			<!-- 路由出口 -->
			<!-- 路由匹配到组件将渲染在这里 -->
			<router-view></router-view>
		</div>
		<script src="../00 Static/vue.min.js"></script>
		<script src="../00 Static/vue-router.min.js"></script>
		<!--
		<script src="要加载的模块.js"></script>
		-->
		<script>
			// 1. 定义（路由）组件。
			// 可以从其他文件 import 进来
			const Welcome = {template: '<div>欢迎</div>'}
			const Student = {template: '<div>student list</div>'}
			const Teacher = {template: '<div>teacher list</div>'}

			// 2. 定义路由
			// 每个路由应该映射一个组件。
			const routes = [
				{path: '/', redirect: '/welcome'}, //设置默认指向的路径
				{path: '/welcome', component: Welcome},
				{path: '/student', component: Student},
				{path: '/teacher', component: Teacher}
			]

			// 3. 创建 router 实例，然后传 `routes` 配置
			const router = new VueRouter({
				routes // （缩写）相当于 routes: routes
			})
			// 4. 创建和挂载根实例。
			// 从而让整个应用都有路由功能
			// 创建一个 vue 对象
			new Vue({
				// 绑定 vue 作用的范围
				el: '#app',
				// 定义页面中显示的模型数据
				data: {
					//==== 请修添加具体操作 ====
				},
				router,
				// 现在，应用已经启动了！
				// 自定义方法
			})
		</script>
	</body>

</html>
